<template>
  <ul class="sys-warn-content" >
    <li v-for="(item,index) in appList" :key='index' :style="{'marginRight': '0.2rem' }">
      <div class="sys-box" :style="[{'width':liWidth+'rem','height':liHeight+'rem'}]">

        <div class="sys-box-header sys-bg blue" v-if="item.level == '低'">
          <span class="sys-name" :style="[{'line-height':lineHeightText+'rem'}]" :title="item.system">{{item.system}}</span>
          <div class="count">
            <div class="count-num" :style="[{'line-height':numHeight+'rem','height':numHeight+'rem','font-size':numFontSize+'rem'}]">{{item.cnt}}</div>
            <div class="text">告警总数</div>
          </div>
        </div>

        <div class="sys-box-header sys-bg yellow" v-if="item.level == '中'">
          <span class="sys-name" :style="[{'line-height':lineHeightText+'rem'}]" :title="item.system">{{item.system}}</span>
          <div class="count">
            <div class="count-num" :style="[{'line-height':numHeight+'rem','height':numHeight+'rem','font-size':numFontSize+'rem'}]">{{item.cnt}}</div>
            <div class="text">告警总数</div>
          </div>
        </div>

        <div class="sys-box-header sys-bg red" v-if="item.level == '高'">
          <span class="sys-name" :style="[{'line-height':lineHeightText+'rem'}]" :title="item.system">{{item.system}}</span>
          <div class="count">
            <div class="count-num" :style="[{'line-height':numHeight+'rem','height':numHeight+'rem','font-size':numFontSize+'rem'}]">{{item.cnt}}</div>
            <div class="text">告警总数</div>
          </div>
        </div>

      </div>
    </li>

  </ul>
</template>

<script>
import http from '../api/api-index'
import axios from 'axios'

export default {
  name: "system-bar",
  props:{
    appList:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data(){
    return{
      liWidth:null,
      liHeight:null,
      NoRightNum:null,//一行几个
      lineHeightText:null,
      numHeight:null,
      numFontSize:null,
    }
  },
  watch:{
    appList:{
      handler(data){
        let bigWidthNum = document.body.clientWidth < 1200 ? 1200 : document.body.clientWidth
        if(data.length <= 20){
          // 等比例缩放 一行7个
          this.NoRightNum = 7
        }
        else if(data.length > 20 && data.length <= 30){
          // 等比例缩放 一行8个
          this.NoRightNum = 8
        }else if(data.length > 30){
          // 等比例缩放 一行9个
          this.NoRightNum = 9
        }
        const chuNum = 100 //字体倍数
        const widthHeightProportion = 352/136
        const widthNum = (1920 - 270)/this.NoRightNum
        const heightNum = widthNum/widthHeightProportion
        const lineHeightNum = 136/50 //上部比例
        const numHeightText = 136/50 //下部字体高度比例
        const numHeightSize = 136/32 //下部字体大小比例

        this.liWidth = widthNum/chuNum
        this.liHeight = heightNum/chuNum
        this.lineHeightText = heightNum/lineHeightNum/chuNum
        this.numHeight = heightNum/numHeightText / chuNum
        this.numFontSize = heightNum/numHeightSize/chuNum
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.sys-warn-content {
  width: 100%;
  height: calc(100vh - 5rem);
  box-sizing: border-box;
  margin-top: 0.25rem;
  overflow: hidden;
  li {
    float: left;
    margin-bottom: 0.2rem;
    margin-right: 0.2rem;
  }
  .sys-box {
    position: relative;
    border: 0.03rem #8FD6FF;
    .sys-name {
      width: 100%;
      box-sizing: border-box;
      padding-left: 0.2rem;
      display: block;
      font-size: 0.14rem;
      /*这里要显示的设置宽度*/
      overflow:hidden;
      white-space:nowrap;
      /*文字超出宽度则显示ellipsis省略号*/
      text-overflow:ellipsis;
    }
    .sys-bg{
      width: 100%;
      height: 100%;
    }
    .blue{
      background: url("../assets/sys-img-blue.png")no-repeat;
      background-size: 100% 100%;
    }
    .yellow{
      background: url("../assets/sys-img-yellow.png")no-repeat;
      background-size: 100% 100%;
      .count-num{
        color: #FFBB1A;
      }
    }
    .red{
      background: url("../assets/sys-img-red.png")no-repeat;
      background-size: 100% 100%;
      .count-num{
        color: #DC1C1C;
      }
    }
    .count {
      text-align: center;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      .text {
        height: 0.19rem;
        font-size:0.14rem;
        color: #FFFFFF;
      }
    }
  }
}
</style>
